<template>
  <div class="container">
    <div class="display">
      <div id="Catalog">
        <form :model="account" @submit.prevent="register()">

          <h3>User Information</h3>

          <table>
            <tr>
              <td>User ID:</td>
              <td><input type="text" name="username" v-model="account.username"/></td>
              <td>
                <div id="isExistInfo"></div>
              </td>
            </tr>
            <tr>
              <td>New password:</td>
              <td><input type="password" name="password" v-model="account.password"/></td>
              <td>
                <div id="isPwd"></div>
              </td>
            </tr>
            <tr>
              <td>Repeat password:</td>
              <td><input type="password" name="repeatPassword" v-model="account.repeatPassword"/></td>
              <td>
                <div id="isRePwd"></div>
              </td>
            </tr>
            <tr>
              <td>Email:</td>
              <td style="z-index: 999"><input type="text" name="email" v-model="account.email"/></td>
              <div id="draw-border" style="margin-left: -340px">
                <button type="button" @click="getEmailCheckCode" class="emailBtn">发送</button>
              </div>
            </tr>
            <tr>
              <td>VerificationCode:</td>
              <td><input type="text" name="verificationCode" v-model="account.checkCode"/></td>
            </tr>
            <tr><font color='red' v-if="registerMsg!=null">{{ registerMsg }}</font></tr>
          </table>

          <table>
            <tr>
              <td>First name:</td>
              <td><input type="text" name="firstname" v-model="account.firstname"/>
              </td>
            </tr>
            <tr>
              <td>Last name:</td>
              <td><input type="text" name="lastname" v-model="account.lastname"/></td>
            </tr>
            <tr>
              <td>Phone:</td>
              <td><input type="text" name="phone" v-model="account.phone"/></td>
            </tr>
            <tr>
              <td>Address 1:</td>
              <td><input type="text" name="address1" v-model="account.address1"/></td>
            </tr>
            <tr>
              <td>Address 2:</td>
              <td><input type="text" name="address2" v-model="account.address2"/></td>
            </tr>
            <tr>
              <td>City:</td>
              <td><input type="text" name="city" v-model="account.city"/></td>
            </tr>
            <tr>
              <td>State:</td>
              <td><input type="text" name="state" v-model="account.state"/></td>
            </tr>
            <tr>
              <td>Zip:</td>
              <td><input type="text" name="zip" v-model="account.zip"/>
              </td>
            </tr>
            <tr>
              <td>Country:</td>
              <td><input type="text" name="country" v-model="account.country"/></td>
            </tr>
          </table>

          <h3>Profile Information</h3>

          <table>
            <tr>
              <td>Language Preference:</td>
              <td>
                <select v-model="account.langpref">
                  <option value="English">English</option>
                  <option value="Chinese">Chinese</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Favourite Category:</td>
              <td>
                <select v-model="account.favcategory">
                  <option v-for="category in categories">{{ category.categoryId }}</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Enable MyList</td>
              <td><input type="checkbox" id="listOption" v-model="account.mylistopt"/></td>
            </tr>
            <tr>
              <td>Enable MyBanner</td>
              <td><input type="checkbox" id="bannerOption" v-model="account.banneropt"/></td>
            </tr>
          </table>

          <div id="BackLink" style="float: left">
            <router-link to="/signOnForm">
              <button>login</button>
            </router-link>
          </div>
          <div id="draw-border">
            <button type="submit">register</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import FormData from "form-data";
import axios from "axios";
import $ from 'jquery'

export default {
  name: "register",
  data() {
    return {
      registerMsg: '',
      account: {},
      categories: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      axios.defaults.withCredentials = true
      axios({
        url: "http://127.0.0.1:8088/catalog/allCategory",
        method: 'get',
      }).then(res => {
        this.categories = res.data.data
        console.log(this.categories)
      })
    },
    getEmailCheckCode() {

      $('.emailBtn').css('color', 'green')
      axios({
        url: "http://localhost:8088/send/" + this.account.email,
        method: 'post',
      }).then(res=>{
        window.confirm('验证码发送成功，请注意查收！')
        console.log(res)
      }).catch((err) => {
        console.log(err)
      });
    },
    register() {
      let data = new FormData();
      data.append('username', this.account.username);
      data.append('password', this.account.password);
      data.append('email', this.account.email);
      data.append('firstName', this.account.firstname);
      data.append('lastName', this.account.lastname);
      data.append('status', 'ok');
      data.append('address1', this.account.address1);
      data.append('address2', this.account.address2);
      data.append('city', this.account.city);
      data.append('state', this.account.state);
      data.append('zip', this.account.zip);
      data.append('country', this.account.country);
      data.append('phone', this.account.phone);
      data.append('langpref', this.account.langpref);
      data.append('favcategory', this.account.favcategory);
      data.append('mylistopt', this.account.mylistopt?1:0);
      data.append('banneropt', this.account.banneropt?1:0);
      data.append('age', '18');
      data.append('isAdmin', '0');

      axios({
        url: "http://localhost:8088/account/register?code=" + this.account.checkCode,
        method: 'post',
        headers: {
          'Content-Type ': 'multipart/form-data'
        },
        data: data
      }).then((res) => {
        console.log('验证码为'+this.account.checkCode)
        console.log(res)
        //将用户登录信息存入localStorage
        if(res.data.data.username!==null){
          localStorage.setItem("username", this.account.username)
          //将account信息存储至localStorage
          localStorage.setItem('account',JSON.stringify(res.data.data))
          //刷新并跳转页面至主页面
          location.href = '/mainForm'
        }else{
          window.confirm('验证码错误！请重试...')
        }

      }).catch((err) => {
        window.confirm('验证码错误！请输入正确的验证码！')
        console.log(err)
      });
    },
  }
}
</script>

<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
@font-face {
  font-family: 'huayuan';
  src: url(@/assets/font/花园肉丸.ttf);
}

@font-face {
  font-family: 'cm';
  src: url(@/assets/font/Begilas.otf);
}


.display {
  width: 600px;
  top: 100px;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

input {
  height: 25px;
  margin-bottom: 5px;
}

td {
  border: none;
}

select {
  width: 90px;
  height: 30px;
}

#draw-border {
  width: 75px;
  position: relative;
  left: 315px;
}

#BackLink {
  top: 13px;
  width: 0;
}

#BackLink button {
  margin-left: 0;
}

</style>